<template class="container">
	<view class="box-container">
		<view>
			<image class="top-back" src="/static/image/cover.jpg"></image>
		</view>
		<view class="cont-box">
			<view class="title-header">
				<p class="title">扫一扫 领福利</p>
				<p class="title-remark"> 畅享便捷惊喜福利宝藏</p>
				<view class="shop-title">
					<image :src="config.logo" style="width: 30px; height: 30px; border-radius: 30px;"></image>
					<p>{{config.name}}</p>
				</view>
			</view>
			<view class="cont-box-container">
				<view class="box-container-one">
					<p class="cont-title fsp">
						<p class="cont-title-text">视频发布</p>
					</p>
				</view>
				<view class="cont-box">
					<tui-row>
						<tui-col :span="8">
							<view class="tui-item bg1">
								<image class="tui-item-img" src="/static/image/fdy-bubble.png"></image>
								<p class="tui-item-title">发抖音</p>
							</view>
						</tui-col>
						<tui-col :span="8">
							<view class="tui-item bg2">
								<image class="tui-item-img" src="/static/image/fks-bubble.png"></image>
								<p class="tui-item-title">发快手</p>
							</view>
						</tui-col>
						<tui-col :span="8">
							<view class="tui-item bg3">
								<image class="tui-item-img" src="/static/image/fxhs-bubble.png"></image>
								<p class="tui-item-title">小红书</p>
							</view>
						</tui-col>
						<tui-col :span="8">
							<view class="tui-item bg4">
								<image class="tui-item-img" src="/static/image/fsph-bubble.png"></image>
								<p class="tui-item-title">视频号</p>
							</view>
						</tui-col>
					</tui-row>
				</view>
				
				<view class="box-container-one">
					<p class="cont-title tsp">
						<p class="cont-title-text">图文发布</p>
					</p>
				</view>
				<view class="cont-box">
					<tui-row>
						<tui-col :span="12">
							<view class="tui-item2 bg1">
								<image class="tui-item-img" src="/static/image/pengyouquan.png"></image>
								<p class="tui-item-title">朋友圈</p>
							</view>
						</tui-col>
						<tui-col :span="12">
							<view class="tui-item2 bg2">
								<image class="tui-item-img" src="/static/image/xiaohongshu.png"></image>
								<p class="tui-item-title">小红书</p>
							</view>
						</tui-col>
					</tui-row>
				</view>
				
				<view class="box-container-one">
					<p class="cont-title dksp">
						<p class="cont-title-text">打卡/点评/收藏</p>
					</p>
				</view>
				<view class="cont-box">
					<tui-grid>
						<tui-grid-item :cell="2">
							<view class="tui-grid-icon">
								<image class="tui-grid-icon-image" src="/static/image/dazhongdianping.png"></image>
							 </view>
							<text class="tui-grid-label">大众点评</text>
						</tui-grid-item>
						<tui-grid-item :cell="2">
							<view class="tui-grid-icon">
								<image class="tui-grid-icon-image" src="/static/image/meituan.png"></image>
							 </view>
							<text class="tui-grid-label">美团点评</text>
						</tui-grid-item>
						<tui-grid-item :cell="2">
							<view class="tui-grid-icon">
								<image class="tui-grid-icon-image" src="/static/image/gaode.png"></image>
							 </view>
							<text class="tui-grid-label">高德点评</text>
						</tui-grid-item>
						<tui-grid-item :cell="2">
							<view class="tui-grid-icon">
								<image class="tui-grid-icon-image" src="/static/image/baidu.png"></image>
							 </view>
							<text class="tui-grid-label">百度点评</text>
						</tui-grid-item>
						<tui-grid-item :cell="2">
							<view class="tui-grid-icon">
								<image class="tui-grid-icon-image" src="/static/image/douyin.png"></image>
							 </view>
							<text class="tui-grid-label">抖音点评</text>
						</tui-grid-item>
					</tui-grid>
				</view>
				
				<view class="box-container-one">
					<p class="cont-title wifisp">
						<p class="cont-title-text">连wifi&加微信</p>
					</p>
				</view>
				<view class="cont-box wifi">
					<tui-row>
						<tui-col :span="12">
							<view class="tui-item2 bg3">
								<image class="tui-item-img" src="/static/image/fdy-bubble.png"></image>
								<p class="tui-item-title">连WIFI</p>
							</view>
						</tui-col>
						<tui-col :span="12">
							<view class="tui-item2 bg3">
								<image class="tui-item-img" src="/static/image/fdy-bubble.png"></image>
								<p class="tui-item-title">加微信</p>
							</view>
						</tui-col>
					</tui-row>
				</view>
				
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				config:{
					"id": 2,
					"admin_id": 1,
					"shop_id": 16,
					"video_dy_switch": 1,
					"video_ks_switch": 1,
					"video_xhs_switch": 1,
					"video_sph_switch": 1,
					"content_xhs_switch": 1,
					"content_pyq_switch": 1,
					"favorite_dz_switch": 1,
					"favorite_dy_switch": 1,
					"favorite_gd_switch": 1,
					"favorite_mt_switch": 1,
					"attention_dy_switch": 1,
					"attention_ks_switch": 1,
					"attention_xhs_switch": 1,
					"wifi_switch": 1,
					"add_wechat_switch": 1,
					"buy_mt_switch": 1,
					"buy_dy_switch": 1,
					"name": "商家名称",
					"logo": ""
				}
			}
		},
		onLoad(options){
			let uuid = options.uuid
			this.getActicityConfig(uuid)
		},
		methods: {
			getActicityConfig(uuid){
				//参数
				let postData = {
					uuid:uuid
				}
				this.tui.request("/Activity/get_config", "Post", postData, false,false,true).then((res) => {
					if (res.code == 1) {
						this.config = res.data
					} else {
						this.tui.showLoading(res.msg)
					}
				}).catch((res) => {
					this.tui.showLoading(res.msg)
				})	
				
			}
			// to_dy(){
			// 	console.log(666)
			// }
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 0 2px;
		padding-bottom: 20px;
		background-color: #EDEFFF;
		// background-color: red;
		.box-container{
			position: relative;
			
		}
	}
	.top-back{
		width: 100%;
	}
	.cont-box{
		width: 100%;
		position: absolute;
		top: 0;
		.title-header{
			padding: 0 16px;
			.title{
				margin-top: 26px;
				font-weight: 700;
				font-size: 24px
			}
			.title-remark{
				font-size: 14px;
				font-weight: 700;
				color: #666;
			}
			.shop-title{
				display: inline-block;
				width: auto;
				margin-top: 10px;
				background: #FFFFFF;
				border-radius: 20px;
				padding: 6px 20px 6px 6px;
				
				p{
					display: inline-block;
					font-size: 14px;
					color: #666;
					margin: 0 0 5px 5px;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					max-width: 90%;
				}
			}
		}
		.cont-box-container{
			    padding: 0 10px;
			    margin-top: 16px;
				.box-container-one{
					margin-bottom: 10px;
					position: relative;
					margin-top: 55px;
					box-sizing: border-box;
					display: flex;
					flex-wrap: wrap;
					
					.cont-title{
						width: 100%;
						font-size: 15px;
						color: #222;
						font-weight: 700;
						position: absolute;
						top: -47px;
						left: 0;
						&.fsp{
							background: url('../../static/image/fsp-title.png') no-repeat;
						}
						&.tsp{
							background: url('../../static/image/tw-title.png') no-repeat;
						}
						&.dksp{
							background: url('../../static/image/dk-title.png') no-repeat;
						}
						&.wifisp{
							background: url('../../static/image/wifi-title.png') no-repeat;
						}
						.cont-title-text{
							height: 55px;
							line-height: 55px;
							padding-left: 44px;
							font-size: 18px;
							color: #fff;
							font-weight: 700;
						}
					}
				}
				.wifi{
					background: linear-gradient(270deg, #DFFF64 0%, #87EFD5 100%) !important;
				}
				.cont-box{
					width: 100%;
					background: #fff;
					border-radius: 12px;
					// padding: 15px 16px;
					margin-top: -10px;
					margin-left: 0 !important;
					margin-right: 0 !important;
					position: relative;
					.tui-grid-icon {
						width: 40px;
						height: 40px;
						margin: 0 auto;
						text-align: center;
						vertical-align: middle;
						.tui-grid-icon-image{
							width: 100%;
							height: 100%;
						}
					}
					
					.tui-grid-label {
						display: block;
						text-align: center;
						font-weight: 400;
						color: #333;
						font-size: 28rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						margin-top: 10rpx;
					}
					.tui-item2 {
						margin: 8px;
						height: 60px;
						text-align: center;
						// background: #5677fc;
						padding: 0 12px;
						border-radius: 10px;
						box-sizing: border-box;
						font-size: 15px;
						color: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
						word-break: break-all;
						&.bg1{
							background: #E1F8DF;
						}
						&.bg2{
							background: #FFE6E9;
						}
						&.bg3{
							background: #FFFFFF;
						}
						.tui-item-title{
							font-size: 16px;
							color: #222;
							font-weight: 700;
							margin-left: 12px;
							margin-top: 0 !important;
						}
						.tui-item-img{
							width: 40px;
							height: 40px;
							// margin-top: -30px;
						}
					}
					.tui-item {
						margin: 8px;
						height: 120px;
						text-align: center;
						// background: #5677fc;
						padding: 0 12px;
						border-radius: 10px;
						box-sizing: border-box;
						font-size: 15px;
						color: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
						word-break: break-all;
						&.bg1{
							background: #EDEFFF;
						}
						&.bg2{
							background: #FFF4ED;
						}
						&.bg3{
							background: #FFEDED;
						}
						&.bg4{
							background: #FFF7E4;
						}
						.tui-item-img{
							width: 75px;
							height: 73px;
							margin-top: -30px;
						}
						.tui-item-title{
							position: absolute;
							margin-top: 60px;
							white-space: nowrap;
							padding: 2px 10px;
							background: #222222;
							color: #fff;
							border-radius: 12px;
							font-size: 12px;
							z-index: 2;
						}
					}
				}
				
				
		}
		
	}
	
	
	
	
</style>